<template>
  <div class="main main_bg">
    <gl-title :titleSize="titleSize" :is_mt="is_mt" @preserve="preserve" :titleRight="titleRight"></gl-title>
    <div class="tit">{{$t('tab_accout.tip')}}</div>
    <div class="list">
      <div class="container">
        <div class="it boxshadow db" v-for="(item,k) in datainfo" v-if="k < 5" :class="{on:item.uid == cid}" @click="ck(item, k)">
          <div class="del" v-if="bEdit">
            <img src="../../assets/images/set/btn_del.png" alt="" v-if="item.uid !== cid" @click.stop="dels(k)">
          </div>
          <div class="ico">
            <!-- <img v-lazy="item.headImage" alt=""> -->
            <img
              :src="
                item.headImage != null
                  ? item.headImage
                  : require('@/assets/images/ico_photo.png')
              "
              alt
            />
          </div>
          <div class="flex" >
            <!-- <div class="id">UID：{{item.uid}}</div> -->
            <div class="id">{{item.username}}</div>
            <div class="cur" v-if="item.uid == cid"><span class="inlineb">{{$t('tab_accout.curr_use')}}</span></div>
          </div>
          <div class="ro" v-if="!bEdit"><span></span></div>
        </div>

        <div class="it boxshadow db" @click="addAccout" v-if="!bEdit && datainfo.length < 5">
          <div class="ico">
            <img src="../../assets/images/set/btn_add.png" alt="">
          </div>
          <div class="flex">
            <div class="id">{{$t('tab_accout.add')}}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="container bottom_btn">
      <button class="btn">{{$t('tab_accout.title')}}</button>
      <button class="btn b2" @click="logout">{{$t('set.logout')}}</button>
    </div> -->
    <div class="copyright tac c-999" style="margin-top: .4rem;">
      {{$t('set.Copyright')}}
    </div>

  </div>
</template>
<script>

  import { mapActions, mapMutations, mapGetters } from "vuex";

  export default {
    data(){
      return {
        titleSize:this.$t('tab_accout.title'),
        is_mt:true,
        bEdit: false,
        datainfo:JSON.parse(localStorage.getItem("accountData")),
        cid:this.$store.state.userData.uid

      }
    },

    mounted() {

      // this.$post(this.URL.member.about, {
      // }).then(res => {
      //   if (res.code == 0) {
      //     this.datainfo = res.data
      //   } else {
      //     this.$toast(res.message);
      //   }
      // });
    },
    computed: {
      titleRight(){
        if(this.bEdit){
          return this.$t('shop.cart_done');
        }
          return this.$t('shop.cart_edit');
      }
    },
    methods: {
      ...mapMutations([
        "SET_TOKEN",
      ]),
      preserve(){
        this.bEdit = !this.bEdit;
      },
      ck(el, k){
        if(!this.bEdit){
          this.cid = el.uid
          this.SET_TOKEN(el.token);
          localStorage.setItem('currToAccountUsername', el.username);
          this.$router.push({
            path: "/my",
          });
        }
      },
      dels(k){
        this.datainfo.splice(k,1)
        localStorage.setItem('accountData', JSON.stringify(this.datainfo));
      },

      addAccout() {
        this.$router.push({
          path: "/user/login",
          query: {
            status:1,
          }
        });
      }
    },


  }

</script>


<style lang="less" scoped>
  #app {
    .tit {
      height: auto;
      line-height: .69rem;
      background: #ddf0ff;
      font-size: .28rem;
      font-weight: 400;
      color: #0091ff;
      padding: 0 .24rem;
      margin-bottom: .2rem;
    }
    .list {
      .it {
        height: 1.5rem;
        background: #ffffff;
        padding: 0 .2rem;
        .del {
          width: .4rem;
          margin-right: 0.3rem;
          img {
            height: 0.4rem;
            width: 0.4rem;
            border-radius: 50%;

          }
        }
        .ico {
          img {
            height: .88rem;
            width: .88rem;border-radius: .44rem;
          }
        }
        .ro {
          span {
            display: block;
            width: .4rem;
            height: .4rem;
            background: url(../../assets/images/set/i_check_off.png) no-repeat;
            background-size: 100% 100%;
          }
        }
        .flex {
          padding: 0 .2rem;
          .id {
            font-size: .26rem;
            font-weight: 600;
            color: #14191f;
            line-height: .37rem;
          }
          .cur {
            span {
              height: .3rem;
              padding: 0 .14rem;
              background: #00d9a2;
              border-radius: .15rem;
              font-size: .22rem;
              font-weight: 400;
              color: #ffffff;
              line-height: .3rem;
            }
          }

        }
        &.on {
          .ro {
            span {
              background-image: url(../../assets/images/set/i_check_on.png);
            }
          }
        }

      }
    }
    .copyright {
      bottom:.6rem;left:0;
      width: 100%;
      position: fixed;
    }
    .bottom_btn {
      padding-top: .2rem;
      button {
        margin-bottom: .2rem;
      }
      .b2 {
        background: #fff;
        color: #F53831;
      }
    }
  }
</style>
